/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div>
      <div class="fixed-bar">
        <div class="item-title">
          <a class="back" href="javascript:history.back(-1)" title="返回列表">
            <i class="fa fa-arrow-circle-o-left"></i>
          </a>
          <div class="subject">
            <h3>会员管理 - 会员信息</h3>
            <h5>网站系统会员管理会员信息</h5>
          </div>
        </div>
      </div>
      <form :model="form">
        <div class="ncap-form-default">
          <dl class="row">
            <dt class="tit">
              <label>会员昵称</label>
            </dt>
            <dd class="opt">
              {{form.nickname}}
              <p class="notic">会员昵称不可修改。</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>用户积分</label>
            </dt>
            <dd class="opt">
              <strong class="red">{{form.pay_points}}</strong> 积分
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>账户余额</label>
            </dt>
            <dd class="opt">
              <strong class="red">{{form.user_money}}</strong> 元
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>
                <em>*</em>手机号码
              </label>
            </dt>
            <dd class="opt">
              <input
                v-model="form.mobile"
                onpaste="this.value=this.value.replace(/[^\d.]/g,'')"
                onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
                class="input-txt"
              />
              <p class="err-msg" v-if="errResult.mobile && !form.mobile">{{errResult.mobile}}</p>
              <p class="notic">请输入常用的手机号码，将用来找回密码、接受订单通知等。</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>
                <em>*</em>电子邮箱
              </label>
            </dt>
            <dd class="opt">
              <input
                v-model="form.email"
                onpaste="this.value=this.value.replace(/[^\d.]/g,'')"
                onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
                class="input-txt"
              />
              <p class="err-msg" v-if="errResult.email && !form.email">{{errResult.email}}</p>
              <p class="notic">请输入常用的邮箱，将用来找回密码、接受订单通知等。</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>性别</label>
            </dt>
            <dd class="opt">
             <template>
                <el-radio-group v-model="form.sex">
                  <el-radio :label="0">保密</el-radio>
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </template>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>QQ</label>
            </dt>
            <dd class="opt">
              <input
                v-model="form.qq"
                type="text"
                onpaste="this.value=this.value.replace(/[^\d.]/g,'')"
                onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
                class="input-txt"
              />
              <p class="notic">QQ</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>注册时间</label>
            </dt>
            <dd class="opt">{{form.reg_time | datefmtYMDHM}}</dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>冻结会员</label>
            </dt>
            <dd class="opt">
              <el-switch v-model="form.is_lock" :active-value="1" :inactive-value="0"></el-switch>
              <p class="notic">如果冻结会员，会员将不能操作资金。</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label>分销功能</label>
            </dt>
            <dd class="opt">
              <el-switch v-model="form.is_distribut" :active-value="1" :inactive-value="0"></el-switch>
              <p class="notic">如果开启，会员参与分销。</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit">
              <label for="mobile">更改上级</label>
            </dt>
            <dd class="opt">
              <input
                class="input-txt"
                type="text"
                v-model="newFirstLeaderMobile"
                @change="isCheck = false"
                placeholder="请输入上级手机号码搜索"
              />
              <el-button
                size="mini"
                @click="checkFirstLeader()"
                style="margin-left: 4px;"
                :loading="isChecking"
              >检测</el-button>
              <el-button
                size="mini"
                @click="changeFirstLeader()"
                style="margin-left: 4px"
                :loading="isChanging"
              >确认更改</el-button>
              <span class="err"></span>
              <p class="notic">该办法只适合用于三级关系，不能用4级，请慎重操作</p>
            </dd>
          </dl>
          <dl class="row">
            <dt class="tit"></dt>
            <dd class="opt">
              <div style="height:160px;">
                <span class="span_1">
                  <ul>
                    <li>用户余额</li>
                    <li>上一级编号</li>
                    <li>上二级编号</li>
                    <li>上三级编号</li>
                  </ul>
                </span>
                <span class="span_1">
                  <ul>
                    <li>
                      <strong class="red">{{form.user_money}}</strong>&nbsp;元
                    </li>
                    <router-link
                      v-if="form.first_leader"
                      :to="{name:'member_details',params:{user_id:form.first_leader}}"
                    >
                      <li>{{form.first_leader}}</li>
                    </router-link>
                    <li v-else>{{form.first_leader}}</li>
                    <router-link
                      v-if="form.second_leader"
                      :to="{name:'member_details',params:{user_id:form.second_leader}}"
                    >
                      <li>{{form.second_leader}}</li>
                    </router-link>
                    <li v-else>{{form.second_leader}}</li>
                    <router-link
                      v-if="form.third_leader"
                      :to="{name:'member_details',params:{user_id:form.third_leader}}"
                    >
                      <li>{{form.third_leader}}</li>
                    </router-link>
                    <li v-else>{{form.third_leader}}</li>
                  </ul>
                </span>
                <span class="span_1">
                  <ul>
                    <li>累积分佣金额</li>
                    <li>一级下线数</li>
                    <li>二级下线数</li>
                    <li>三级下线数</li>
                  </ul>
                </span>
                <span class="span_1">
                  <ul>
                    <li>
                      <strong class="red">{{form.distribut_money}}</strong>&nbsp;元
                    </li>
                    <router-link
                      v-if="form.first_leader_count"
                      :to="{name:'members',params:{first_leader:form.user_id}}"
                    >
                      <li>{{form.first_leader_count}}</li>
                    </router-link>
                    <li v-else>{{form.first_leader_count}}</li>
                    <router-link
                      v-if="form.second_leader_count"
                      :to="{name:'members',params:{second_leader:form.user_id}}"
                    >
                      <li>{{form.second_leader_count}}</li>
                    </router-link>
                    <li v-else>{{form.second_leader_count}}</li>
                    <router-link
                      v-if="form.third_leader_count"
                      :to="{name:'members',params:{third_leader:form.user_id}}"
                    >
                      <li>{{form.third_leader_count}}</li>
                    </router-link>
                    <li v-else>{{form.third_leader_count}}</li>
                  </ul>
                </span>
                <div style="clear:both;"></div>
              </div>
            </dd>
          </dl>
          <div class="bot">
            <el-button type="primary" @click="onSubmit()" :loading="isLoading">确认提交</el-button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import {
  getUser,
  updateUser,
  checkFirstLeader,
  changeFirstLeader
} from "@/utils/api";
export default {
  data() {
    return {
      form: {},
      newFirstLeaderMobile: "",
      isCheck: false,
      isChecking: false,
      isChanging: false,
      isLoading: false,
      errResult: { mobile: null }
    };
  },
  created() {
    this.getMember();
  },
  methods: {
    getMember() {
      var that = this;
      getUser({
        user_id: this.$route.params.user_id
      }).then(function(res) {
        that.form = res;
      });
    },
    checkFirstLeader() {
      if (!this.checkMobile()) {
        return;
      }
      let that = this;
      this.isChecking = true;
      checkFirstLeader({
        user_id: this.form.user_id,
        mobile: this.newFirstLeaderMobile
      }).then(res => {
        if (res.status == 1) {
          that.$message.success("符合更改上级");
          that.isCheck = true;
        } else {
          that.$message.error(res.msg);
        }
        that.isChecking = false;
      });
    },
    changeFirstLeader() {
      if (!this.checkMobile()) {
        return;
      }
      let that = this;
      this.isChanging = true;
      changeFirstLeader({
        user_id: this.form.user_id,
        mobile: this.newFirstLeaderMobile,
        is_ckeck: this.isCheck
      }).then(res => {
        if (res.status == 1) {
          that.$message.success("更改上级成功");
          that.getMember();
        } else {
          that.$message.error(res.msg);
        }
        that.isChanging = false;
      });
    },
    checkMobile() {
      if (!this.newFirstLeaderMobile) {
        this.$message.error("手机号码不能为空");
        return false;
      } else {
        if (!/^1[3456789]\d{9}$/.test(this.newFirstLeaderMobile)) {
          this.$message.error("手机格式错误");
          return false;
        }
      }
      return true;
    },
    onSubmit() {
      if (!this.form.mobile && !this.form.email) {
        this.$message.error("参数错误");
        this.errResult.mobile = "手机和邮箱至少填一项";
        return;
      }
      this.isLoading = true;
      var that = this;
      updateUser(that.form).then(function(res) {
        if (res.status == 1) {
          that.$message.success({
            message: "保存成功",
            duration: 1000,
            onClose: function() {
              that.$router.push({ name: "members" });
            }
          });
        } else if (res.status == -1) {
          that.$message.error("参数错误");
          that.errResult = res.result;
        } else {
          that.$message.error(res.msg);
        }
        that.isLoading = false;
      });
    },
    toMember(userId) {
      this.$router.push({
        name: "member_details",
        params: {
          user_id: userId
        }
      });
    }
  },
  watch: {
    //监听路由，刷新页面数据
    $route(to, from) {
      this.getMember(); //返回页面直接调取方法
    }
  }
};
</script>

<style scoped>
td {
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
}
.span_1 {
  float: left;
  margin-left: 0px;
  height: 130px;
  line-height: 130px;
}
.span_1 ul {
  list-style: none;
  padding: 0px;
}
.span_1 ul li {
  border: 1px solid #ccc;
  height: 40px;
  padding: 0px 10px;
  margin-left: -1px;
  margin-top: -1px;
  line-height: 40px;
}
</style>
